<template>
	<view class="pl30 pr30 pb150">
		<!-- 循环项盒子 -->
		<view  v-if="cartList.length>0">
			<view class="pt30 bg-f radius24 mt30" v-for="(item,i) in cartList" :key='i' v-if="item.goods.length>0">
				<!-- 上面的店铺名称盒子 -->
				<view class="ml30" >
					<radio :checked="item.status" color="#C00000" class="mr30" @click="changeRadio(item, i)"></radio>
					<text class=" mr8 cuIcon-shop"></text>
					<text>{{item.shop_name}}</text>
				</view>
				<!-- 商品盒子 -->
				<uni-swipe-action>
					<block v-for="(item2,i2) in item.goods" :key='i2'>
						<uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(item,item2)">
							<view class="flex ml30 mt30 col-center flex1">
								<radio :checked="item2.status" color="#C00000" class="mr30"
									@click="changeildren(item,item2)"></radio>
								<view class="flex pb30 flex1 mr30 centerbox">
									<!-- 商品图片 -->
									<image :src="item2.thumb" class="w132 h132 radius8 mr20"></image>
									<view class="flex row-column row-between flex1">
										<view class="">
											<text class="fs26 color3">{{item2.goods_name}}</text>
											<!-- Specifications规格 -->
											<view class="mt10">
												<view class="Specifications" v-if="item2.skusku_chima">{{item2.skusku_chima}}:{{item2.skusku}}</view>
												<!-- <u-icon name="arrow-down"></u-icon> -->
											
											</view>
										</view>
										<view class="flex row-between">
											<text>¥ {{item2.price}}</text>
											<u-number-box v-model="item2.num" @change="valChange(item2)" :input-height="30">
											</u-number-box>
											<!-- <text>x {{item2.num}}</text> -->
										</view>
									</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
		</view>
		<view class="mt50" v-else>
			<u-empty text="购物车为空" mode="car" ></u-empty>
			<u-button class="mt50" :custom-style="customStyle" hover-class='none' style="color: #FFFFFF;" @click="$jump('/subpkg/goods/goods')">去挑选商品</u-button>
		</view>
		
		<!-- 底部盒子 -->
		<view class="pr30 pt16 pl30 pb50 flex row-between footerbox col-center" v-if="cartList.length>0">
			<view class="">
				<radio color="#C00000" class="mr10" @click="selectAll" :checked="selectAllBtn"></radio>
				<text class="color3 fs24">全选</text>
			</view>
			<view class="flex col-center">
				<text class="fs16 color3 mr20">合计:</text>
				<text class="fs32 color-red fw">¥{{total}}</text>
			</view>
			<view class="btnpay" @click="payBtn">
				结算
			</view>
		</view>
		<!-- //选择器 -->
		<!-- <u-picker v-model="show" mode="selector"></u-picker> -->
	</view>
</template>

<script>
	import uniSwipeAction from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		name: 'cart',
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		onLoad() {
			this.getCartList()
		},
		data() {
			return {
				//总价
				total: 0,
				//获取总价的参数
				sku: '',
				show: false,
				value: 1,
				//全选按钮状态
				selectAllBtn: false,
				//购物车列表
				cartList: [],
				//店铺
				shopArr: [],
				// 左滑删除的配置信息
				options: [{
					//显示文本内容
					text: '删除',
					style: {
						backgroundColor: '#F43535',
					}
				}],
				selectList: [],
				customStyle:{
					background:'#D23030'
				}
			};
		},
		methods: {
			//
			getCartList() {
				this.$api.getCart_list().then(res => {
					console.log(res)
					res.data.map(item => {
						item.status = false
						item.goods.map(item2 => {
							item2.status = false
						})
					})
					this.cartList = res.data
					//如果返回没数据  总价设置为空  全选不被选中   结算商品设置为空
					if(res.data.length<1) {
						this.total=0
						this.selectAllBtn=false
						this.selectList=[]
					}
				})
			},
			valChange(item2) {
				item2.type=2
				// let obj={}
				// obj.sku=item2.sku
				// obj.num=item2.num
				// obj.type=2
				// console.log(obj)
				// return
				console.log(item2)
				// return
				this.$api.addCart(item2).then(res=>{
					console.log(res)
					// this.$msg(res.msg)
				})
			},
			//点击了左滑删除按钮
			swipeActionClickHandler(item, item2) {
				console.log(item)
				console.log(item2)
				this.$api.delCart({
					id: item2.sku
				}).then(res => {
					console.log(res)
					this.$msg(res.msg)
					this.getCartList()
				})
			},
			//点击店铺选择
			async changeRadio(item, index) {
				// this.cartList[index].
				item.status = !item.status
				if (item.status) {
					this.selectList.push(item)
					await item.goods.map(goods => {
						goods.status = true
					})
					this.getToatal()
				} else {
					item.goods.map(goods => {
						goods.status = false
					})
					await this.selectList.map((item3, index) => {
						if (item3.shop_id == item.shop_id) {
							this.selectList.splice(index, 1)
						}
					})
					this.getToatal()
				}
				if (this.selectList.length == this.cartList.length) {
					this.selectAllBtn = true
				} else {
					this.selectAllBtn = false
				}
			},
			//点击规格单选框 
			async changeildren(item, item2) {
				item2.status = !item2.status
				console.log(item2.status)
				if (item2.status) {
					item.status = true
					let str = JSON.stringify(this.selectList)
					if (str.indexOf(item.shop_name) < 0) {
						this.selectList.push(item)
					}
				}
				let arr = await item.goods.filter(data => !data.status)
				if (arr.length == item.goods.length) {
					item.status = false
					let index = this.selectList.findIndex(data => data.shop_name == item.shop_name)
					this.selectList.splice(index, 1)
				}
				if (this.selectList.length == this.cartList.length) {
					this.selectAllBtn = true
				} else {
					this.selectAllBtn = false
				}
				if (!item2.status) {
					this.selectAllBtn = false
				}
				this.getToatal()
			},
			//全选按钮
			async selectAll() {
				if (this.selectAllBtn) {
					await this.cartList.map(item => {
						item.status = false
						item.goods.map(item2 => {
							item2.status = false
						})
					})
					this.selectList = []
					this.getToatal()
				} else {
					await this.cartList.map(item => {
						item.status = true
						item.goods.map(item2 => {
							item2.status = true
						})
					})
					this.selectList = this.cartList.map(item => {
						return item
					})
					this.getToatal()
				}
				this.selectAllBtn = !this.selectAllBtn
			},
			//结算
			payBtn() {
				let sku_details=[]
				this.selectList.forEach(item=>{
					if(item.status) {
						item.goods.forEach(goods=>{
							if(goods.status){
								sku_details.push({
									goods_item_id:goods.shop_goods_item_id,
									num:goods.num,
									note:'',
									shop_id:goods.shop_id,
								})
							}
						})
					}
				})
				console.log(sku_details);
				if(sku_details.length<1) {
					this.$msg('未选中任何商品结算')
					return
				}
				this.$api.confirm_order_page({sku_details}).then(res=>{
					console.log(res)
					this.$msg('订单发送成功')
					uni.setStorageSync('selectList',res.data)
					setTimeout(()=>{
						uni.navigateTo({
							url:'/subpkg/submitOrder/submitOrder'
						})
					},1000)
				})
			},
			//获取总价
			async getToatal() {
				this.sku = await this.selectList.map(item => {
					return item.goods.map(item2 => {
						if (item2.status) {
							return item2.sku
						}
					})
				})
				await this.$api.cart_list_price({
					sku: this.sku
				}).then(res => {
					this.total = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.Specifications {
		// height: 40rpx;
		display: inline;
		padding: 10rpx 16rpx;
		background-color: #F5F5F5;
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		border-radius: 8rpx;
	}

	.centerbox {
		border-bottom: 2rpx solid #F6F6F6;
	}

	.footerbox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF ;

		.btnpay {
			width: 260rpx;
			height: 80rpx;
			background: #D23030;
			box-shadow: 0px 2rpx 10rpx 0px rgba(210, 48, 48, 1);
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>
